<html>
    <head>
 	   <title>DeviceOrientationEvent</title>
	   <meta charset="UTF-8" />
	</head>
	<body>
		<p>左右：<span id="alpha">0</span></p>
		<p>前后：<span id="beta">0</span></p>
		<p>扭转：<span id="gamma">0</span></p>
		<p>指北针指向：<span id="heading">0</span>度</p>
		<p>指北针精度：<span id="accuracy">0</span>度</p>
		<script type="text/javascript">
		function orientationHandler(event) {
			document.getElementById("alpha").innerHTML = event.alpha;
			document.getElementById("beta").innerHTML = event.beta;
			document.getElementById("gamma").innerHTML = event.gamma;
			document.getElementById("heading").innerHTML = event.webkitCompassHeading;
			document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy;
		}
		
		if (window.DeviceOrientationEvent) {
		  window.addEventListener("deviceorientation", orientationHandler, false);
		} else {
		  document.body.innerHTML = "What user agent u r using???";
		}
   	 	</script>
	</body>
</html>